import React from 'react';

const PlatformSelector = ({ selectedPlatform, onPlatformChange, platforms = ['微博', '知乎', '百度'] }) => {
  const getPlatformIcon = (platform) => {
    const icons = {
      '微博': '🐦',
      '知乎': '💡',
      '百度': '🔍',
      '抖音': '🎵'
    };
    return icons[platform] || '📱';
  };

  return (
    <div className="flex items-center gap-2">
      {platforms.map(platform => (
        <button
          key={platform}
          onClick={() => onPlatformChange(platform)}
          className={`group relative px-5 py-3 rounded-lg font-semibold text-base transition-all duration-300 transform hover:scale-105 ${
            selectedPlatform === platform
              ? 'bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-md scale-105'
              : 'bg-white/70 backdrop-blur-sm text-gray-600 border border-gray-300 hover:bg-white hover:shadow-sm hover:border-blue-400 hover:text-blue-600'
          }`}
        >
          {/* 背景动画 */}
          <div className="absolute inset-0 rounded-lg bg-gradient-to-r from-blue-400 to-purple-400 opacity-0 group-hover:opacity-15 transition-opacity duration-300"></div>
          
          <span className="relative z-10 flex items-center justify-center space-x-2">
            <span className="text-lg">{getPlatformIcon(platform)}</span>
            <span className="whitespace-nowrap">{platform}</span>
          </span>
          
          {/* 选中指示器 */}
          {selectedPlatform === platform && (
            <div className="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-1 h-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-pulse"></div>
          )}
        </button>
      ))}
    </div>
  );
};

export default PlatformSelector;